<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


</body>
<script>
    // 注意:  
    // 1. ajax需要依赖于服务器环境  -> 学习ajax的时候,需要请求服务器  (测试时需要使用live Server打开-> 本地服务, 或者可以请求别人的服务器)
    // 2. live Server => Vscode插件 -> 在本地起了一个服务器 -> 只能做前端页面展示 -> 没有后端 -> nodejs
    // 3. ajax可以请求同服务器下的其他文件(js css txt json => get方式) -> 将返回文件中的内容


    // xhr.readyState  前端请求的状态 (前端从创建请求 配置请求 发送请求 服务器接收请求 处理请求 返回响应 -> 个个不同的阶段都有对应的状态)
    // 0  请求未初始化 -> 只是创建了请求,还未配置请求相关的信息
    // 1  配置了请求相关的信息,但是还未发送请求 => 请求已经建立，但是还没有发送（还没有调用 send()）
    // 2  请求已发送，正在处理中 (此时后端已经接收到请求正在处理)
    // 3  请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
    // 4  响应已完成；返回响应的结果 -> 但是结果不一定是成功的 (1. 还要继续 2.成功  3. 重定向  4.客户端有误  5. 服务端有误 )

    // xhr.status   后端返回的状态码 (一般是三位数)
    // 1xx  信息, 服务器收到请求，需要请求者继续执行操作
    // 2xx  成功，操作被成功接收并处理
    // 3xx  重定向，需要进一步的操作以完成请求
    // 4xx  客户端错误，请求包含语法错误或无法完成请求
    // 5xx  服务器错误，服务器在处理请求的过程中发生了错误

    // 200：ok，页面正确打开，并得到完整的响应内容。
    // 301：被请求的资源已永久移动到新位置
    // 302：请求的资源临时从不同的 URI响应请求
    // 304：缓存
    // 404：页面不存在。
    // 500：常指后端代码发生错误
    // 503：由于临时的服务器维护或者过载，服务器当前无法处理请求。

    // ajax请求流程:
    // 1. 创建一个http请求 (http:超文本传输协议)   
    // 2. 配置请求相关的信息  请求的方式 请求的地址(get方式携带数据)   是否异步
    // 3. 发送请求
    // 4. 绑定事件 监听请求的状态
    // 5. 等请求成功之后,获取响应数据 -> 执行后续的内容




    // 1. 创建一个http请求 (http:超文本传输协议)   
    var xhr = new XMLHttpRequest();
    console.log(xhr);
    console.log(xhr.readyState); // 0

    // 2. 配置请求相关的信息  请求的方式 请求的地址(get方式携带数据)   是否异步
    // xhr.open(type,url,async)
    // type 请求方式 (get post put delete ...)
    // url  请求的地址(同服务器下的其他文件,后端接口)
    // async 是否异步(true:异步(默认) false:同步)

    xhr.open("get", "../data/1.txt", true);
    console.log(xhr.readyState); // 1

    // 3. 发送请求
    xhr.send(); // 从请求发送 到 后端接收请求 -> 需要时间 -> 不会立即改变状态
    console.log(xhr.readyState); // 1

    // 页面加载时只是绑定事件 ->  xhr.readyState改变时才会触发
    xhr.onreadystatechange = function () {
        // 2  3  4  -> 事件触发三次
        console.log("xhr.readyState:", xhr.readyState);

        // xhr.readyState == 4 && xhr.status == 200  服务器返回响应结果,且结果也是成功的
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            console.log(result);
        }
    }





</script>

</html>